<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">日志列表</Col>
       </Row>
       <div class="table-box">
            <Row type="flex" justify="start" :style="{marginBottom: '20px'}">
                <Col span="4">
                    <Select v-model="userId" :placeholder="userArr[0].name" :style="{width: '100%'}">
                        <Option v-for="(item, index) in userArr" :key="index" :value="item.id">{{item.name}}</Option>
                    </Select>
                </Col>
                <Col span="6" :style="{paddingLeft: '16px'}">
                    <DatePicker type="daterange" split-panels placeholder="选择开始-结束日期"  :options="dateOptions" @on-change="onChangeDate" style="width: 100%"></DatePicker>
                </Col>
                <Col span="4" :style="{paddingLeft: '16px'}">
                    <Button type="primary" @click.stop="handleSubmit" @keyup.enter="handleSubmit" class="input-width">查询</Button>
                </Col>
            </Row>
            <Table width="100%" :height="height" border :columns="columns" :data="data" :loading="loading"></Table>
            <Page :total="pageTotal" :current="pageCurrent" :page-size="pageSize"
            :page-size-opts="pageSizeOpts" show-sizer class="page" show-total @on-change="changePage" @on-page-size-change="pageSizeChang" />
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var height = this.$util.getClientHeight()-64-51-30-58-15-47-55;
            var that = this;

            return {
                userArr: [{
                        id: 'all',
                        name: '全部'
                    }],
                userId: 'all',
                startEndDate: null,
                dateOptions:{
                    disabledDate (date) {
                        var maxDate = new Date();
                        return maxDate < date;
                    }
                },
                loading: true,
                height: height,
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 70
                    },
                    {
                        title: '管理员名称',
                        key: 'user_name',
                        width: 150
                    },
                    {
                        title: '菜单名称',
                        key: 'menu_name',
                        width: 150
                    },
                    {
                        title: '操作数据',
                        key: 'data',
                        width: 250
                    },
                    {
                        title: '操作日期',
                        key: 'create_time',
                        width: 170
                    },
                    {
                        title: 'IP地址',
                        key: 'IP',
                        width: 150
                    }
                ],
                data: [],
                pageCurrent: 1,
                pageSize: 15,
                pageSizeOpts: [15, 25, 35],
                pageTotal: 0,
            }
        },
        created: function () {
            // 获取日志列表信息
            this.getLogList();
            // 获取菜单列表信息
            this.getUserList();
        },
        methods: {
            // 获取菜单信息列表
            getUserList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/admin/userlist/',
                    data: {
                        type: 1
                    },
                    success: function(data){
                        var userArr = that.userArr;
                        that.userArr = userArr.concat(data.data.data);
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 获取菜单信息列表
            getLogList(){
                var that = this;
                var type = that.type;
                var pageSize = that.pageSize;
                var pageCurrent = that.pageCurrent;
                var userId = that.userId;
                var startEndDate = that.startEndDate;

                that.$util.ajax({
                    that: that,
                    url: '/log/loglist/',
                    data: {
                        pageSize: pageSize,
                        pageCurrent: pageCurrent,
                        userId: userId,
                        startEndDate: startEndDate
                    },
                    success: function(data){
                        that.data = data.data.data;
                        that.pageTotal = data.data.total;
                        that.loading = false;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 分页页码点击事件
            changePage (param){
                this.pageCurrent = param;
                this.getLogList();
            },
            // 每页显示条数选择事件
            pageSizeChang(param){
                this.pageSize = param;
                this.getLogList();
            },
            // 按条件查询
            handleSubmit(){
                // 获取日志列表信息
                this.getLogList();
            },
            // 选择日期事件
            onChangeDate(date){
                console.log(date);
                var endDate = new Date(date[1]);
                endDate.setDate(endDate.getDate()+1);
                date[1] = endDate.getFullYear() + '-' + (endDate.getMonth()+1) + '-' + endDate.getDate();
                console.log(date);
                this.startEndDate = date;
            }
        }
    }
</script>
<style scoped>
</style>